// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'base' as *;
@use './labels' as *;

.list {
  .i-table {
    thead {
      font-weight: bold;
      border-bottom: 2px solid $pastel-gray;
      color: $black;

      tr {
        border-top: 0;
      }
    }

    th {
      &.tablesorter-header:not(.sorter-false) {
        cursor: pointer;

        &:hover {
          @include transition(background-color 0.2s);
          background-color: darken($light-gray, 5%);
        }
      }

      &::before {
        @include rotate-transform(0.3s);
        display: inline-block;
      }

      &.header-sort-asc {
        @include icon-before('icon-arrow-down');

        &::before {
          transform: rotate(-180deg);
        }
      }

      &.header-sort-desc {
        @include icon-before('icon-arrow-down');
      }

      > div {
        display: inline-block;
      }
    }

    td {
      vertical-align: top;
      padding: 12px 5px;

      .vertical-aligner {
        display: block;
        padding-top: 0.27em; // Ensure that single line text cells are aligned in the middle
      }
    }
  }

  .entry-action-buttons {
    > a {
      font-size: 1.2em;
      margin-left: 3px;
    }
  }

  .person-row {
    @include ellipsis();

    &::before {
      color: $gray;
      margin-right: 5px;
    }

    &.inline {
      display: inline;
    }
  }

  table.i-table {
    margin-top: 0;
  }

  .scrollable {
    overflow-x: auto;
    width: 100%;

    table {
      width: auto;
      table-layout: auto;

      td.title-column {
        // Allow contribution, abstract & paper titles to wrap when 'Adapt columns width' is active.
        // This prevents horizontal scroll on the table when the title is too long.
        white-space: initial;
      }
    }
  }

  .change-columns-width:not(.active) {
    @include icon-before('icon-enlarge');
  }

  .change-columns-width.active {
    @include icon-before('icon-shrink');
  }
}

.list-filter-dialog {
  max-width: 1200px;
}

@mixin enabled-action {
  @include icon-before('icon-eye');
}

@mixin not-enabled-action {
  @include icon-before('icon-eye-blocked');
  color: $red !important;
}

.list-filter {
  position: relative;

  .list-filter-content {
    max-height: 65vh;
    overflow-y: auto;
  }

  .list-column {
    @extend .flexrow;
    margin: 5px;
    width: 14.2em;

    > .filter {
      @extend .flexrow;
      align-items: center;
      cursor: pointer;
      padding: 0;

      > a {
        color: $light-black;
        padding: $i-label-vertical-padding $i-label-horizontal-padding;
      }

      .i-dropdown {
        z-index: 100;
      }

      &:hover {
        > a::before {
          color: $yellow !important;
        }
      }
    }
  }

  .i-label {
    text-align: left;
    font-weight: bold;
    min-height: 2em;

    &.title-wrapper {
      @include ellipsis();

      display: inline-flex;
      align-items: center;
      cursor: pointer;
      flex-grow: 1;

      &:not(.striped) {
        border-color: $dark-blue;
        color: $dark-blue !important;

        + .filter {
          border-color: $dark-blue;
        }

        > .title {
          color: $dark-blue;
        }
      }

      > .title {
        @include ellipsis();

        flex-grow: 1;
        color: $dark-gray;
        margin-left: 4px;

        &::before {
          margin-right: 0.5em;
        }
      }

      > .actions {
        flex-shrink: 0;

        > .visibility {
          &.enabled {
            @include enabled-action();
            display: none;
          }

          &:not(.enabled) {
            @include not-enabled-action();
          }
        }
      }

      &:hover > .actions > .visibility {
        display: inline;
      }
    }
  }

  ul.i-dropdown {
    height: auto;
    z-index: 1;
    max-height: 12em;
    overflow: auto;
    min-width: 12em;

    > li {
      @extend .flexrow;
      align-items: center;

      > label {
        color: $black;
        margin-left: 0.5em;
        vertical-align: middle;
        cursor: pointer;
      }
    }
  }

  > .bottom-buttons {
    display: flex;
    justify-content: end;
    padding-top: 15px;
  }
}

#filter-placeholder {
  @include font-family-title();

  display: none;
  font-size: 1.2em;
  color: $dark-gray;
  text-align: center;
  margin-top: 1em;
}
